<template>
  <div class="register">
    <div class="register--one">
      <div class="register--data">
        <ul>
          <li>
            <input ref="tel" type="tel" placeholder="请输入手机号"
                   autofocus="autofocus"
                   @keydown="phoneDown"
                   @blur="phoneBlur"
                   @focus="phoneFocus"
                   v-model="userInfo.phoneNumber">
            <span class="delete-icon" @click="phoneClick" v-show="phoneShow">
              <img src="../assets/icon/delete.png" alt="">
            </span>
          </li>
          <li>
            <input type="text" placeholder="请输入短信验证码" v-model="userInfo.validCode">
            <span v-show="showTime" @click="getCode" class="requireCount">获取验证码</span>
            <span v-show="!showTime" class="count">{{count}}S后重发</span>
          </li>
          <li>
            <input type="password"
                   @keydown="pswDown"
                   @blur="pswBlur"
                   @focus="pswFocus"
                   v-model="userInfo.password"
                   placeholder="请输入6～12位密码">
            <span class="delete-icon" @click="pswClick" v-show="pswShow">
              <img src="../assets/icon/delete.png" alt="">
            </span>
          </li>
        </ul>
      </div>
      <div class="register--contract">
        <input class="check" id="checke" type="checkbox" @click="checkedRex">
        <label for="checke"></label>
        <span class="check_span">我已阅读并同意
        <a href="#">《商城销售合同》</a>
          </span>
      </div>
      <div class="register--button">
        <!--有了ref才可以像获取dom节点一样获取，$refs+名字(P132)-->
        <button @click="maskRegister" ref="btnRegister">注册</button>
      </div>
    </div>
  </div>

</template>

<script>
  export default {
    name: "register",
    data(){
      return {
        phoneShow: false,
        // codeShow: false,
        pswShow: false,
        // 定时器
        showTime: true,
        count: '',
        timer: null,
        // 双向绑定
        userInfo: {
          phoneNumber: '',
          password: '',
          validCode: '',
        },
        // 绑定变色
        boole: false,
      }
    },
    methods:{
      // 弹出提示框
      maskRegister(){
        if(this.boole===true){
          this.$api.register(this.userInfo).then(data => {
            if(data.data.code===2001){
              console.log('注册成功');
              console.log(data.data);
              localStorage.setItem('user',data.data.data.phoneNumber);
              this.$routes.push('/root/auth/login')
            }else if(data.data.code===2002){
              console.log('注册失败');
            } else if(data.data.code===2003)
            {
              console.log('验证码输入不正确');
            }else if(data.data.code===2004){
              console.log('该手机号已经注册过了，请登录！');
            }
            console.log(data);
          }).catch(error => {
            console.log(error);
          })
        }else{
          console.log('您还未同意该协议！')
        }

      },
      // 键盘事件
      phoneDown(){
        this.phoneShow = true;
        if (this.userInfo.phoneNumber === ''){
          this.phoneShow = false;
        }
      },
      pswDown(){
        this.pswShow = true;
        if (this.userInfo.phoneNumber === ''){
          this.pswShow = false;
        }
        this.pswShow = true;
      },
      // 失焦事件
      phoneBlur(){
        this.phoneShow = false;
      },
      pswBlur(){
        this.pswShow = false;
      },
      // 聚焦事件
      phoneFocus(){
        if(this.userInfo.phoneNumber.length > 0){
          this.phoneShow = true;
        } else {
          this.phoneShow = false;
        }
      },
      pswFocus(){
        if (this.userInfo.password.length > 0){
          this.pswShow = true;
        }
      },
      // 图标全部清除
      phoneClick(){
        this.userInfo.phoneNumber = '';
      },
      pswClick(){
        this.userInfo.password = '';
      },
      // 倒计时
      getCode(){
        const re =/^1[35789]\d{9}$/;
        if(re.test(this.$refs.tel.value)){
        const TIME_COUNT = 60;
        if (!this.timer) {
          this.count = TIME_COUNT;
          this.showTime = false;
          this.timer = setInterval(() => {
            if (this.count > 0 && this.count <= TIME_COUNT) {
              this.count--;
            } else {
              this.showTime = true;
              clearInterval(this.timer);
              this.timer = null;
            }
          }, 1000)
        }
        this.$api.validCode({
          phoneNumber:this.userInfo.phoneNumber,
          code:this.userInfo.validCode
        }).then(data => {

        /*  this.code=data.data.data;*/
        /*     localStorage.setItem('')*/
          console.log(data);
          console.log(data.data.data);
          })
          .catch(error => {
            console.log(error);
          })
      }else{
          console.log('请输入正确的手机号码');
        }
      },
      // 关联事件
      checkedRex(){
        // this.$refs.btnRegister.style.background = '#4aa5fd';
        // 可以灵活使用，避免写死导致执行一次
        this.boole = !this.boole;
        if (this.boole) {
          this.$refs.btnRegister.style.background = '#4aa5fd';
        } else {
          this.$refs.btnRegister.style.background = '#838385'
        }
      },
    }
  }
</script>

<style scoped>
  *{
    margin: 0;
    padding: 0;
  }
  li{
    list-style: none;
  }

.register--data  input{
    display: inline-block;
    border: none;
    outline: none;
    line-height: 1.1733rem;
    padding-left: .42666rem;
    font-size: .37333rem;
    color: #333;
    padding-right: .42666rem;
  }
  a{
    color: #4aa5fd;
    text-decoration:none;
  }
  img{
    width: .65333rem;
    height: .6rem;
  }
  .register{
    width: 100vw;
    background-color: white;
  }
  .requireCount{
    position: relative;
    color: #4aa5fd;
    font-size: .4rem;
    float: right;
    line-height: 1.1733rem;
    padding-right: .4rem;
  }
  .count{
    color: red;
    font-size: .4rem;
    margin-left: 1.2rem;
  }
  .register--data{
    margin-top: 1.1333rem;
  }
  .register--data>ul>li{
    display: block;
    height: 1.1733rem;
    padding-left: .8rem;
    padding-right: .8rem;
    position: relative;
  }
  .register--data>ul>li::after{
    display: block;
    content: '';
    border-bottom: 1px solid #c8c8cb;
    vertical-align: middle;
  }
  .register--data>ul>li>input{
      line-height: 1.1633rem;
      padding-left: .42666rem;
      outline: none;
      font-size: .37333rem;
      color: #333;
      border: none;
      padding-right: .42666rem;
  }
  .register--data>ul>li>button{
    line-height: 1.1733rem;
    color: #4aa5fb;
    font-size: .4rem;
    margin-left: 1rem;
  }
  .register--contract{
    margin-top: .5rem;
    padding-left: 2rem;
    color: #cbcbcb;
    vertical-align: middle;
  }
  /*伪元素*/
  .check{
    position: absolute;
    visibility: hidden;
    vertical-align: middle;
  }
  .check+label{
    position: absolute;
    width: .4266rem;
    height: .4266rem;
    left: .9rem;
    border: 1px solid #A6A6A6;
    border-radius: 50%;
    background-color: #DEDEDE;
    vertical-align: middle;
  }
  .check:checked+label{
    background-color: #4aa5fd;
  }
  .check:checked+label:after{
    content: "";
    position: absolute;
    left: 6px;
    top:8px;
    width: 16px;
    height: 4px;
    border: 3px solid #fff;
    /*做小钩子*/
    border-top-color: transparent;
    border-right-color: transparent;
    transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
  }
  .register--button{
    margin-top: 1rem;
    text-align: center;
  }
  .register--button>button{
    width: 6.88rem;
    line-height: 1.1733rem;
    color: white;
    background: #838385;
    font-size: .4rem;
    border-radius: .5rem;
    outline: none;
    border: none;
  }
  .delete-icon img{
    vertical-align: middle;
    width: .65333rem;
    height: .6rem;
  }
  .delete-icon {
    position: absolute;
    display: inline-block;
    vertical-align: middle;
    right: 1.1rem;
    bottom: .3rem;
  }
</style>
